<template>
  <a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
    <span class="ant-pro-account-avatar">
      <a-avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" class="antd-pro-global-header-index-avatar" />
      <span>{{ currentUser.name }}</span>
    </span>
    <template v-slot:overlay>
      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
        <a-menu-item v-if="menu" key="center" @click="handleToCenter">
          <a-icon type="user" />
          个人中心
        </a-menu-item>
        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
          <a-icon type="setting" />
          个人设置
        </a-menu-item>
        <a-menu-divider v-if="menu" />
        <a-menu-item key="logout" @click="handleLogout">
          <a-icon type="logout" />
          退出登录
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <span v-else>
    <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
  </span>
</template>

<script>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "AvatarDropdown",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const currentUser = ref({
      name: "张三"
    });

    const handleToCenter = () => {
      // this.$router.push({ path: '/account/center' })
    };
    const handleToSettings = () => {
      // this.$router.push({ path: '/account/settings' })
    };
    const handleLogout = () => {
      store.dispatch("user/logout");
      router.push(`/login?redirect=${route.fullPath}`);
    };
    return {
      currentUser,
      handleToCenter,
      handleToSettings,
      handleLogout
    };
  }
};
</script>

<style>
</style>